<template>
	<tn-popup mode="bottom" v-model="show" @close="close">
		<view class="popup tn-padding-sm">
			<view class="tn-text-lg">
				{{title}}
			</view>
			<view class="tn-flex tn-text-md tn-padding-sm">
				<view v-for="(item,index) in list" :key="index" class="item tn-padding-sm"
					:class="[activeindex==index?'active':'']" @click="emitLabel(item,index)">

					{{item.name}}
				</view>
			</view>
		</view>
	</tn-popup>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				title: '',
				list: [],
				activeindex: 0,
				type: ''
			}
		},
		methods: {
			openPrpup(title, list, index, type) {
				this.show = true
				this.title = title
				this.type = type
				this.list = list
				this.activeindex = index !== -1 ? index : 0
			},
			close() {
				this.show = false
				this.list = []
			},
			emitLabel(item, index) {
				this.activeindex = index
				this.$emit('emitLabel',this.type, item)
				this.close()

			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		min-height: 500rpx;

		.item {
			background-color: #f3f3f3;
			width: 30%;
			margin: 10rpx 20rpx;
			text-align: center;
			border-radius: 10rpx;
		}

		.active {
			border: 1px solid #3e9cf3;
		}
	}
</style>